<template>
  <div>
    <el-container class="home-container">
    <!-- 头部区域 -->
    <el-header>
      <div>
        <img src="../assets/3.png" alt="">
        <span>宠爱有家后台管理系统</span>
      </div>
      <div style="margin-left: 60%;">管理员:{{ user.account }},欢迎您！</div>
      <el-button type="danger" round @click="logout">返回主页</el-button>
    </el-header>
    <!-- 页面主体区域 -->
      <el-container style="height: 100%; width: 100%;">
        <!-- 侧边栏 -->
        <el-aside width="isCollapse ? '64px' : '200px'" style="height: 900px; background-color: #7fcfea;">
            <div class="toggle-button" @click.prevent="toggleCollapse">|||</div>
            <el-menu active-text-color="#ffd04b" background-color="#7fcfea" text-color="#00506e" 
            unique-opened :collapse="isCollapse" :collapse-transition="false" router 
            default-active="activePath">
              <!--1级菜单-->
              <el-sub-menu v-for="item in menuList" :index="item.id+''" :key="item.id" style="background-color: #7fcfea;">
                <!-- #title 插槽-->
                <template #title>
                    <!--图标-->
                    <el-icon><ArrowRight /></el-icon>
                    <!--文本-->
                    <span>{{item.menuname}}</span>
                </template>
                <!-- 2级菜单-->
                <el-menu-item  v-for="subItem in item.children" :index="subItem.path"
                :key="subItem.id" @click="saveNavStatus('/'+subItem.path)" style="background-color: #7fcfea;">
                    <!--图标-->
                    <el-icon><list/></el-icon>
                    <!--文本-->
                    <span>{{subItem.menuname}}</span>
                </el-menu-item>
              </el-sub-menu>
            </el-menu>
        </el-aside>
        <!-- 右侧内容主体 -->
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  export default {
    name:'HomeView',
    data(){
    return {
      menuList:[],
      isCollapse:false,
      activePath:'',
      user:{},
    }
    },
    created(){
      this.getMenuList();
      this.activePath = window.sessionStorage.getItem('activePath')
      this.user = JSON.parse(window.sessionStorage.getItem("user"));
    },
    methods:{
      logout(){
        //清空token
        //window.sessionStorage.clear();
        //跳转到登录页面
        this.$router.push({
          name:'chat'
        })
      },
      //请求侧边栏数据
      getMenuList(){
        this.$http.get("/menus").then((res)=>{
          if(res.data.status!=200){
          this.$message.error(res.data.message);
          return;
          }
          //console.log(res.data.data);
          this.menuList = res.data.data;
        });
      },
      toggleCollapse(){
            this.isCollapse = !this.isCollapse;
      },
      //保存链接的激活装填
      saveNavStatus(activePath){
            window.sessionStorage.setItem('activePath',activePath);
            this.activePath = activePath;
      },
    }
  }
</script>
<style>
.home-container {
  height: 100%; 
  font-family: '宋体';
  font-weight: 400;
}
.el-header {
  background-color: #7fcfea;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  height: 60px;
  color: #00506e;
  font-size: 20px;
}
.el-header > div {
  display: flex;
  align-items: center;
}
.el-header > div > img {
  width: 145px;
  margin-right: 20px;
  height:85px;
}
.toggle-button{
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}
.headername{
  float: right;
}
</style>